<template>
	<view>
		<!-- 修正scroll-view的位置 -->
		<view class="beij">
			<scroll-view scroll-x="true" class="scroll">
				<view v-for="(item, i) in tabData" :key="i" class="flzx" :class="{red:i==index}"
					@click="OnList($event,i)">
					<text>{{item.title}}</text>
					<view :style="{backgroundColor:index==i?'#557af5':''}" class="ui_blue"></view>
				</view>
			</scroll-view>
		</view>

		<view class="imgbox">
			<view v-for="(item,k) in ImgUI" v-if="item.parent_id==index" :key="k" @click="onitem(item.name)">
				<image :src="url+item.img_url"></image><br>
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		NEW_URL_DEV
	} from "@/common/config.js";
	export default {
		name: "tabBarList",
		data() {
			return {
				tabData: [{
						title: '法律咨询',
						z: 0,
						list: []
					},
					{
						title: '鉴定服务',
						z: 1,
						list: []
					},
					{
						title: '公证服务',
						z: 1,
						list: []
					}
				],
				ImgUI: [],
				index: 0,
				url: NEW_URL_DEV
			};
		},
		mounted() {
			this.Ui_title();
			console.log(" 测试:");
		},
		methods: {
			Ui_title() {
				uni.request({
					url: NEW_URL_DEV + "/simple/user/zyyd_ui_items",
					method: "GET",
					success: (res) => {
						console.log(" 测试数据:", res.data);
						this.ImgUI = res.data;
					},
					fail: (err) => {
						console.error("  请求失败:", err);
					}
				});
			},
			OnList(j, i) {
				console.log(j),
					this.index = i;
			},
			onitem(k) {
				console.log("你点击了" + k)
				uni.navigateTo({
					url: '/pages/Consultation/Consultation?id='+k
				});
				
			}

		}
	}
</script>

<style lang="scss">
	.scroll {
		white-space: nowrap;
		/* 关键：防止换行 */
		width: 100%;
		/* 添加以下样式确保横向布局 */
		display: flex;
		flex-direction: row;
	}

	.flzx {
		/* 添加以下样式确保选项卡不换行 */
		display: inline-block;
		flex-shrink: 0;
		margin-right: 50rpx;
		color: #999999;
		line-height: 50rpx;
	}

	.ui_blue {
		height: 5rpx;
		width: 30rpx;
		margin: 0 auto;
		border-radius: 60rpx;
	}

	.imgbox {
		image {
			width: 60rpx;
			height: 60rpx;
			margin-left: 60rpx;
			margin-top: 30rpx;
			margin-right: 50rpx;
		}

		text-align: center;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}

	.red {
		text {
			color: black;
			font-size: 35rpx;
			font-weight: bold;
		}
	}

	.beij {
		margin-top: 20rpx;
		/* 移除display:flex，因为scroll-view已经处理了 */
	}

	button {
		margin: 0rpx;
	}
</style>